<template>
  <div class>
    <div style="padding:30px 30px 0px 30px;">
    <el-row>
      <el-col :span="6">
        社区名称：
        <el-input v-model="sname" placeholder="" style="width: 120px;"></el-input>
      </el-col>
      <el-col :span="6"></el-col>
      <el-col :span="6">
        <el-button type="primary" @click="initdata">查询</el-button>
        
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="isadd()">添加记录</el-button>
      </el-col>
    </el-row>

    </div>

    <div style="margin:20px;">
      <el-table :data="tableData" border stripe>
        <el-table-column prop="id" label="id" align="center"></el-table-column>
        <el-table-column prop="type" label="type" align="center"></el-table-column>
        <el-table-column prop="msg" label="msg" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="delrecord(scope.row)">删除</el-button>
            <el-button type="primary" @click="isupdate = true;refform = scope.row; isadddia = true;">更新</el-button>
            
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:center;">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum" background>
      </el-pagination>
      
    </div>
    <el-dialog :title="isupdate ? '更新' : '添加'" :visible.sync="isadddia" center width="50%" @close="isadddia = false">
      <el-form :model="refform" ref="refform" label-width="80px">
        <el-form-item label="type">
          <el-input v-model="refform.type"></el-input>
        </el-form-item>
        <el-form-item label="msg">
          <el-input v-model="refform.msg"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="isadddia = false">取 消</el-button>
        <el-button type="primary" @click="isupdate ? updaterecord() : addrecord()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="社区二维码"
      :visible.sync="isshowqr"
      width="30%"
      center
      @close="isshowqr = false">
      <div style="text-align:center;">

      <qriously :value="qrdata" :size="300" />
      </div>
      <span slot="footer">
        <el-button @click="isshowqr = false">取 消</el-button>
        <el-button type="primary" @click="isshowqr = false">确 定</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>
<script>
import sysconfService from "@/api/sysconfService";

export default {
  components: {},
  data() {
    return {
      sname: "",
      pageSize: 5,
      currentPage: 1,
      totalNum: 0,
      isupdate: false,
      isshowqr: false,
      qrdata: '',
      tableData: [],
      isadddia: false,
      refform: {
        commnuityname: "",
        msg: ""
      }
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initdata();
  },
  methods: {


    sizeChange(val){
      
      this.pageSize = val

      this.initdata()
    },
    currentChange(val){
      this.currentPage = val
      this.initdata()
    },

    delrecord(row){
      sysconfService.del({code: row.code}).then(res => {
        console.log(res);
        this.initdata()
      });

    },
    updaterecord(){
      sysconfService.update(this.refform).then(res => {
        console.log(res);
        this.isadddia = false;
        this.initdata()
      });

    },
    initdata() {
      sysconfService.list({current: this.currentPage, size: this.pageSize, name: this.sname}).then(res => {
        console.log(res);
        this.tableData = res.data.records;
        this.totalNum = res.data.total;
      })
    },
    isadd() {
      this.isadddia = true;
      this.isupdate = false;
      this.refform.code = ''
      this.refform.name = ''
    },
    addrecord() {
      // this.isadddia = true
      sysconfService.insert(this.refform).then(res => {
        console.log(res);
        if (res.code == 0) {
          this.isadddia = false;
          this.initdata();
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
</style>